import React, { useState } from 'react';
import { Table, Button, Input, Select, Form } from 'antd';
import * as XLSX from 'xlsx';

function LotStorePage() {
  const [form] = Form.useForm();
  const [data] = useState([]);
  const [pageSize, setPageSize] = useState(20); 

  const columns = [
    { title: '业务类型', dataIndex: 'businessType', key: 'businessType' },
    { title: '商品编号', dataIndex: 'productCode', key: 'productCode' },
    { title: '商品名称', dataIndex: 'productName', key: 'productName' },
    { title: '批号', dataIndex: 'batch', key: 'batch' },
    { title: '生产日期', dataIndex: 'prodDate', key: 'prodDate' },
    { title: '有效期至', dataIndex: 'validTo', key: 'validTo' },
    { title: '批号数量', dataIndex: 'batchQty', key: 'batchQty' },
    { title: '商品规格', dataIndex: 'productSpec', key: 'productSpec' },
    { title: '包装单位', dataIndex: 'unit', key: 'unit' },
    { title: '大包装数量', dataIndex: 'bigPackQty', key: 'bigPackQty' },
    { title: '中包装数量', dataIndex: 'midPackQty', key: 'midPackQty' },
    { title: '生产厂家', dataIndex: 'manufacturer', key: 'manufacturer' },
    { title: '有效期', dataIndex: 'validPeriod', key: 'validPeriod' },
    { title: '所属公司', dataIndex: 'company', key: 'company' },
    { title: '中药产地', dataIndex: 'tcmOrigin', key: 'tcmOrigin' },
  ];

  // 导出Excel功能（字段中文）
  const handleExport = () => {
    const exportData = data.map(row => ({
      '业务类型': row.businessType,
      '商品编号': row.productCode,
      '商品名称': row.productName,
      '批号': row.batch,
      '生产日期': row.prodDate,
      '有效期至': row.validTo,
      '批号数量': row.batchQty,
      '商品规格': row.productSpec,
      '包装单位': row.unit,
      '大包装数量': row.bigPackQty,
      '中包装数量': row.midPackQty,
      '生产厂家': row.manufacturer,
      '有效期': row.validPeriod,
      '所属公司': row.company,
      '中药产地': row.tcmOrigin,
    }));
    const ws = XLSX.utils.json_to_sheet(exportData);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, '批次库存');
    XLSX.writeFile(wb, '批次库存.xlsx');
  };

  return (
    <div style={{ padding: 16, background: '#f5f6fa' }}>
      <Form
        form={form}
        layout="inline"
        style={{ marginBottom: 16, background: '#fff', padding: 16, borderRadius: 8, flexWrap: 'wrap' }}
        clearOnDestroy
      >
        <Form.Item label="生产厂家/商家简称" name="manufacturer">
          <Input style={{ width: 160 }} />
        </Form.Item>
        <Form.Item label="商品编号" name="productCode">
          <Input style={{ width: 160 }} />
        </Form.Item>
        <Form.Item label="商品名称" name="productName">
          <Input style={{ width: 160 }} />
        </Form.Item>
    
        <Form.Item label="业务类型" name="businessType">
          <Select style={{ width: 120 }} allowClear>
            <Select.Option value="西药">西药</Select.Option>
            <Select.Option value="中药">中药</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="是否包含0库存" name="hasZeroStock">
          <Select style={{ width: 120 }} allowClear>
            <Select.Option value="是">是</Select.Option>
            <Select.Option value="否">否</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Button type="primary">检索</Button>
        </Form.Item>
        <Form.Item>
          <Button onClick={handleExport}>导出</Button>
        </Form.Item>
      </Form>
      <Table
        columns={columns}
        dataSource={data}
        bordered
        pagination={{ 
          showSizeChanger:true,
          pageSizeOptions: ['10', '20', '50', '100'],
          pageSize: pageSize, showTotal: total => `共${total}条`,
          onShowSizeChange: (current, size) => {
            setPageSize(size);
          }
         }}
        style={{ background: '#fff', borderRadius: 8 }}
        scroll={{ x: '100%', y: 'calc(100vh - 260px)' }}
      />
    </div>
  );
}

export default LotStorePage;
